<template>
  <div class="content">
    <h2 class="title">热门精选</h2>
    <div class="list">
      <template v-for="(item, index) in HotChoiceness" :key="index">
        <houseItemV3
          @click="getDetail(item.data.houseId)"
          v-if="item.discoveryContentType == 3"
          :item-data="item.data"
        >
        </houseItemV3>
        <houseItemV9
          @click="getDetail(item.data.houseId)"
          v-else-if="item.discoveryContentType == 9"
          :item-data="item.data"
        >
        </houseItemV9>
      </template>
      <van-loading vertical style="left: 50%">
        <template #icon>
          <van-icon name="star-o" size="30" />
        </template>
        加载中...
      </van-loading>
    </div>
  </div>
</template>

<script setup>
import useHomeStore from '@/stores/modules/home'
import { storeToRefs } from 'pinia'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import houseItemV3 from '@/components/house/house-item-v3.vue'
import houseItemV9 from '@/components/house/house-item-v9.vue'
import useScrollLoad from '@/hooks/useScroll'
import router from '@/router'

const homeStore = useHomeStore()
const page = ref(1)
const pageSize = ref(10)
onMounted(() => {
  homeStore.getHotChoice(page.value, pageSize.value)
})

const { HotChoiceness } = storeToRefs(homeStore)
const { isLoading, isSearch, scrollTop } = useScrollLoad()
watch(isLoading.value, (newValue) => {
  if (isLoading.value) {
    setTimeout(() => {
      console.log('加载更多')
      getmore()
      isLoading.value = false
    }, 1000)
  }
})
const getmore = () => {
  page.value++
  homeStore.getHotChoice(page.value, pageSize.value)
}

const getDetail = (id) => {
  router.push({
    path: '/detail',
    query: {
      id: id,
    },
  })
  console.log(id)
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  .title {
    font-size: 18px;
    padding: 10px;
    color: var(--primary-color);
  }
  .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    margin: 0px 5px;
  }
}
</style>
